<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>区域论坛系统</title>
    <link rel="stylesheet" href="/css/index.css">
    <link rel="stylesheet" href="/css/layui.css">
    <script src="/layui.js"></script>
    <script src="./power.js"></script>
    <style>
        #root{
            display: flex;
        }
        #root>div{
            flex: 1;
        }

        .info li{
            margin: 50px 0;
            font-weight: 700;
            font-size: 20px;
            
        }
        #myArticle li{
            margin: 8px 0;
            width: 80%;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        #myArticle a{
            color: blue;
            
        }
        
        #myArticle a:hover{
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <header>
        <div class="logo">
            区域论坛系统
        </div>
        <ul>
            <li><a href="/">论坛首页</a></li>
            <li><a href="/article/addArticle">发帖</a></li>
            <li><a href="/article/about">关于我们</a></li>

        </ul>


        <div class="user"></div>
        <script>
             layui.use( function(){
                  var $ = layui.$
                  if(sessionStorage.user){
                    $('.user').append(`
                        <div>欢迎您：<a class="my" href="/user/users/${JSON.parse(sessionStorage.user).id}">${JSON.parse(sessionStorage.user).username}</a></div>
                    `)
                  }else{
                      $('.user').append(`
                        <div class="login">
                            <a href="/user/userLogin">登录</a>
                        </div>
                        <div class="regrister">
                            <a href="/user/regrister">注册</a>
                        </div>
                      `)
                  }
                });
        </script>




    </header>
    <div id="root">
        <div style="padding-left: 20px;">
            <h1>个人信息</h1>
            <ul class="info">
                <li>用户id：<%= data.id %></li>
                <li>用户名：<%= data.username %></li>
                <li>
                    用户状态：
                    <% if(data.status==1){ %>
                        <span style="color:green">正常</span>
                    <% } %>
                    <% if(data.status==0) { %>
                        <span style="color:red">停用</span>
                    <% } %>
                </li>
                <li>用户简介：<%= data.msg %></li>
                <li>注册时间：<%= data.create_time %></li>
                <li id="logout" style="color: red;cursor: pointer;">退出登录</li>
                <script>
                    layui.use(function(){
                        var $ = layui.$;
                        $('#logout').click(function(){
                            sessionStorage.clear();
                            $.get({
                                url:'/user/logout',
                                success:function(res){
                                    layer.msg("退出成功")
                                    setTimeout(() => {
                                        window.location.href = "/"
                                    }, 1000);
                                }
                            })
                        })
                    })
                </script>
                <li><a id="edit" style="color: blue;cursor: pointer;">修改我的信息</a></li>
                <script>
                    layui.use(function(){

                        let $ = layui.$;
                        $('#edit').click(function(){
                           
                            layer.open({
                                type: 1, 
                                title:'修改信息',
                                content: `
                                    <div style="padding:50px;width:500px">
                                        用户名：<br><br><input value="${'<%= data.username %>'}" id="newName" class="layui-input"/><br>
                                        密　码：<br><br><input id="password" type="password" class="layui-input" /><br>
                                        简　介：<br><br><textarea id="newMsg" class="layui-textarea">${'<%= data.msg %>'}</textarea>
                                        <br>
                                        <button id="submit" type="button" class="layui-btn">提交</button>
                                    </div>
                                    
                                `
                            })
                            $('#submit').click(function(){
                            if($('#newName').val()=='' || $('#newMsg').val()==''){
                                layer.msg("信息不能为空！");
                                return false;
                            }else{
                                $.post({
                                    url:'/user/edit',
                                    data:{
                                        username:$('#newName').val(),
                                        msg:$('#newMsg').val(),
                                        password:$('#password').val(),
                                        id:'<%= data.id %>'
                                    },
                                    success:function(res){
                                        if(res.code == 200){
                                            layer.msg('修改成功');

                                            setTimeout(() => {
                                                window.location.reload()
                                            }, 1000);
                                        }else{
                                            layer.msg(res.msg);
                                        }
                                    }
                                })
                            }
                        })
                            
                        })
                       
                        
                    })
                </script>
            </ul>
        </div>
       <div>
        <h3>我发布的文章</h3>
        <ul id="myArticle"></ul>
        <script>
            layui.use(function(){
                var $ = layui.$;
                $.get({
                    url:"/article/user/" + JSON.parse(sessionStorage.user).id,
                    success:function(res){
                        res.data.forEach((item,index)=>{
                            $("#myArticle").append($(`<li><a href="/article/detail/${item.id}">${index + 1}. ${item.title}</a></li>`))
                        })
                    }
                })
            })
        </script>
       </div>
    </div>
</body>
</html>